<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">我的工作平台</el-breadcrumb-item>
            <el-breadcrumb-item>待办列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!--卡片视图区-->
        <el-card>
            <!--用户列表区-->
            <el-table :data="menus" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="待办任务类型" prop="genre"></el-table-column>
                <el-table-column label="待办任务名称" prop="name" width="300px"></el-table-column>
                <el-table-column label="到达时间" prop="time"></el-table-column>
                <el-table-column label="操作" width="150px">
                    <template>
                        <!-- 修改按钮 -->
                        <el-button type="primary" icon="el-icon-view" size="mini"
                                   @click="viewmatter = true"></el-button>
                        <!-- 查看按钮 -->
                        <el-button type="primary" icon="el-icon-document-copy" size="mini"
                                   @click="disposematter = true"></el-button>
                    </template>
                </el-table-column>
            </el-table>


            <!--分页区-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination>
        </el-card>

        <!--查看待办事项-->
        <el-dialog title="查看待办事项"
                   :visible.sync="viewmatter"
                   width="70%">
            <!--内容主体区-->
            <el-form ref="viewFormRef" label-width="70px">
                <el-table :data="control" border stripe>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column label="任务编号" prop="id"></el-table-column>
                    <el-table-column label="任务名称" prop="name" width="100px"></el-table-column>
                    <el-table-column label="巡检线路" prop="circuit"></el-table-column>
                    <el-table-column label="起始杆号" prop="start"></el-table-column>
                    <el-table-column label="终止杆号" prop="termination"></el-table-column>
                    <el-table-column label="下发人" prop="initiator" width="180px"></el-table-column>
                    <el-table-column label="下发时间" prop="time" width="130px"></el-table-column>
                    <el-table-column label="备注信息" prop="remark"></el-table-column>
                </el-table>

            </el-form>
            <!--内容底部区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="viewmatter = false">取 消</el-button>
                <el-button type="primary" @click="viewmatter = false">确 定</el-button>
            </span>
        </el-dialog>


        <!--调整待办事项-->
        <el-dialog title="等级确认"
                   :visible.sync="disposematter"
                   width="90%">
            <!--内容主体区-->
            <el-form ref="viewFormRef" label-width="70px">
                <el-table :data="control" border stripe>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column label="任务编号" prop="id"></el-table-column>
                    <el-table-column label="任务名称" prop="name" width="100px"></el-table-column>
                    <el-table-column label="巡检线路" prop="circuit"></el-table-column>
                    <el-table-column label="起始杆号" prop="start"></el-table-column>
                    <el-table-column label="终止杆号" prop="termination"></el-table-column>
                    <el-table-column label="下发人" prop="initiator" width="180px"></el-table-column>
                    <el-table-column label="下发时间" prop="time" width="130px"></el-table-column>
                    <el-table-column label="备注信息" prop="remark"></el-table-column>
                    <el-table-column label="缺陷等级">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"                            >
                            </el-option>
                        </el-select>
                    </el-table-column>
                </el-table>

            </el-form>
            <!--内容底部区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="disposematter = false">取 消</el-button>
                <el-button type="primary" @click="disposematter = false">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "Back",
        data() {
            return {
                /*获取用户列表的参数对象, 分页*/
                queryInfo: {
                    query: '',
                    // 当前的页数
                    pagenum: 1,
                    // 当前每页显示多少条数据
                    pagesize: 2
                },
                total: 0,
                menus: [],
                control: [],
                /*控制查看待办事项的显示与隐藏对话框*/
                viewmatter: false,
                disposematter: false,
                /*查看表单数据*/
                /*viewForm: {
                    genre: "缺陷管理",
                    name: '测试人员',
                    time: '2013-12-12 13:24:10',
                }*/
                value: '',
                options: [{
                    value: '选项2',
                    label: '一般'
                }, {
                    value: '选项3',
                    label: '严重'
                }, {
                    value: '选项4',
                    label: '紧急'
                }],
            }
        },
        created() {
            this.getList()
            this.getdetails()
        },
        methods: {
            /*async getList() {
                const {data: res} = await this.axios.get('/back.json')
                if (res.meta.status != 101){
                    return this.$message.error('获取待办列表失败')
                }
                this.menus = res.data.back
            }*/
            getList() {
                this.axios.get('/back.json').then((res) => {
                    this.menus = res.data.result
                    this.total = res.data.total
                })
            },
            getdetails(){
                this.axios.get('/control.json').then((res) => {
                    this.control = res.data.result
                })
            },
            /*监听 pagesize 改变的事件*/
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize
                this.getList()
            },
            /*监听页码值改变的事件*/
            handleCurrentChange(newPage) {
                this.queryInfo.pagenum = newPage
                this.getList()
            },
        }
    }
</script>

<style scoped>

</style>
